<template>
  <div class="gen-talking">
    <header class="pad">
      <van-nav-bar title="即时倾诉" :border="false" @click-left="returnIndex">
        <template #left>
          <van-icon name="arrow-left" size="27" color="white" />
        </template>
      </van-nav-bar>
      <div class="banner">
        <img src="../../assets/img/talking/banner.png" alt="" />
      </div>
    </header>
    <main>
      <div class="banner-bom"></div>
      <div class="twobtn">
        <div class="twobtn-wrap">
          <div class="wrap-icon">
            <img src="../../assets/img/talking/icon02.png" />
          </div>
          <div class="wrap-words">
            <p class="wrap-words-p1">倾诉指南</p>
            <p class="wrap-words-p2">排忧疏导 隐私安全</p>
          </div>
        </div>
        <div class="twobtn-wrap">
          <div class="wrap-icon">
            <img src="../../assets/img/talking/icon03.png" />
          </div>
          <div class="wrap-words">
            <p class="wrap-words-p1">一键倾诉</p>
            <p class="wrap-words-p2">智能匹配咨询师</p>
          </div>
        </div>
      </div>
      <van-dropdown-menu>
        <van-dropdown-item title="排序" ref="item"> </van-dropdown-item>
        <van-dropdown-item title="性别年龄" ref="item"> </van-dropdown-item>
        <van-dropdown-item title="擅长方向" ref="item"> </van-dropdown-item>
      </van-dropdown-menu>
      <ul class="ul-wrap">
        <li v-for="item in state.list" :key="item._id">
          <div class="which-ing">
            <img :src="item.icon" />
          </div>
          <div class="left-img">
            <van-image width="92" height="92" :src="item.img" />
          </div>
          <div class="right-wrods">
            <div class="right-wrods-main">
              <p class="words-namep">
                {{ item.name }}
                <span
                  ><img src="../../assets/img/talking/icon05.png" alt=""
                /></span>
              </p>
              <div class="much">
                <p class="inline-b">
                  <span>{{ item.personum }}</span
                  >人向她倾诉
                </p>
                <p class="inline-b">100%接通率</p>
                <p class="slabel">
                  <span>{{ item.citiao[0] }}</span
                  ><span>{{ item.citiao[1] }}</span>
                </p>
              </div>
              <div class="introduce-wrap">
                <p class="introduce">
                  {{ item.item }}
                </p>
              </div>
            </div>
            <div class="price">
              <p>
                <span class="reds big-reds">{{ item.price }}元</span
                ><span class="reds small-reds">/次</span
                ><span class="greys">{{ item.yuanprice }}元/次</span>
              </p>
              <p class="youhui">立减¥50.00</p>
            </div>
          </div>
        </li>
      </ul>
    </main>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getTalkingData } from "../../utils/api";
export default {
  setup() {
    const item = ref(null);
    const state = reactive({
      value: 0,
      switch1: false,
      switch2: false,
      list: [],
    });
    const onConfirm = () => {
      item.value.toggle();
    };
    onMounted(() => {
      getTalking();
    });
    const getTalking = async () => {
      const a = await getTalkingData();
      state.list = a.data.result;
      console.log(state.list);
    };
    //跳转路由
    const router = useRouter();
    const returnIndex = () => {
      router.go(-1);
    };
    return {
      item,
      state,
      onConfirm,
      returnIndex,
    };
  },
};
</script>
<style lang="less">
@import url("../../assets/css/var.less");
:root {
  --van-nav-bar-title-text-color: white;
}
.gen-talking {
  .pad {
    padding: 0 11px;
  }
  width: 100%;
  header {
    background: linear-gradient(90deg, #3384da, #05cafb);
    height: 143px;
    .van-nav-bar {
      color: white;
      background-color: transparent;
      .van-nav-bar__left {
        padding: 0;
      }
    }
    .banner {
      width: 352px;
      height: 157px;
      position: absolute;
      left: 11px;
      top: 60px;
      img {
        width: 100%;
      }
    }
  }
  main {
    .banner-bom {
      height: 112px;
    }
    .twobtn {
      width: 100%;
      height: 100px;
      background: #fafafa;
      .center();
      justify-content: space-evenly;
      .twobtn-wrap {
        width: 168px;
        height: 60px;
        padding: 11px 10px;
        background-color: white;
        .center();
        justify-content: space-evenly;
        .wrap-icon {
          width: 37px;
          height: 37px;
          img {
            width: 100%;
          }
        }
        .wrap-words {
          .center();
          flex-direction: column;
          align-items: flex-start;
          .wrap-words-p1 {
            font-size: 12px;
            color: #656565ff;
          }
          .wrap-words-p2 {
            color: #bcbcbcff;
          }
        }
      }
    }
    .ul-wrap {
      li {
        padding: 17px 11px;
        height: 153px;
        display: flex;
        position: relative;
        .which-ing {
          position: absolute;
          right: 0;
          margin-top: 2px;
          width: 42px;
          height: 42px;
        }
        .right-wrods {
          flex: 1;
          padding-left: 17px;
          .introduce-wrap {
            width: 234px;
            height: 19px;
            border-top: 1px solid #f2f2f2;
            position: relative;
          }
          .right-wrods-main {
            height: 92px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            .words-namep {
              font-size: 14px;
              color: black;
              font-weight: 500;
            }
            .much {
              .inline-b {
                display: inline-block;
                color: #a0a0a0;
                font-size: 9px;
                margin-right: 14px;
              }
              .slabel {
                margin-top: 4px;
                display: inline-block;
                span {
                  margin-right: 5px;
                  width: 46px;
                  height: 14px;
                  padding: 0 4px;
                  background-color: #f6f6f6;
                  color: #808080;
                  border-radius: 5px;
                  font-size: 9px;
                  line-height: 14px;
                }
              }
            }
            .introduce {
              width: 100%;
              font-size: 10px;
              line-height: 10px;
              color: #959595;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              position: absolute;
              bottom: 0;
            }
          }
          .price {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .reds {
              color: #ff5b05;
            }
            .big-reds {
              font-size: 16px;
              font-weight: 500;
            }
            .small-reds {
              font-size: 10px;
            }
            .greys {
              color: #b9b9b9;
              text-decoration: line-through;
            }
            .youhui {
              color: #ff5a01;
              font-size: 10px;
              line-height: 14px;
              border: 1px solid #ffac85;
              border-radius: 8px;
              padding: 2px 4px;
            }
          }
        }
      }
    }
  }
}
</style>
